<!-- 
@name: 首页
-->
<template>
	<div id="orderDetail" class="page">
		<!-- 商品信息 -->
		<div class='whiteWrap'>
			<div class="goodsWrap">
				<div class="flex-row">
					<img object-fit="fill" class="icon1" :src="detailData.goodsPhoto?detailData.goodsPhoto[0]:''"></img>
					<div class="flex-column " style="flex:1">
						<div class="flex-between" @click="goCouponDetail(detailData.goods)">
							<div class="text1">{{detailData.goodsName}}</div>
							<div class="text2">
								<van-icon name="arrow" />
							</div>
						</div>
						<div class="text2">有效时间段至 {{detailData.expirationTime}}</div>
						<div class="flex-row flex-alignCenter">
							<div class="text3" v-if="detailData.amtAll">
								<span style="font-size:0.22rem">￥</span>{{detailData.amtAll}}
							</div>
							<div class="text3 flex-row flex-alignCenter" v-if="detailData.pvAll">
								<span style="margin:0 0.06rem" v-if="detailData.amtAll&&detailData.pvAll">+</span>
								<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
								{{detailData.pvAll}}
							</div>
						</div>
					</div>
				</div>
				<div v-if="detailData.statusName == '待使用' ||detailData.statusName == '已付款'">
					<div class="code flex-center">
						<!-- <img object-fit="fill" :src='detailData.code' ></img> -->
						<div id="qrcode" class="share"></div>
					</div>
					<div class="flex-between">
						<div class="text4 flex-center">券码信息<span class="text5">({{detailData.orderCardList&&detailData.orderCardList.length}}张可用)</span></div>
						<div class="text6 flex-center" @click="goRefund(detailData.pkey)">
							申请退款
						</div>
					</div>
					<div class="text2">{{detailData.expirationTime}} 到期
					</div>
					<div class="codeList">
						<ul>
							<li class="text1 flex-between" v-for="item in detailData.orderCardList" :key="item.pkey">
								<div :class="item.checkTime?'text3':'text1'" class="">{{item.checkCode}}</div>
								<div :class="item.checkTime?'text4':'text2'">{{item.checkTime?'已使用':'待使用'}}</div>
							</li>
						</ul>
					</div>
				</div>
				<div v-if="detailData.status == 'REFUNDING' ">
					<div class="code flex-center">
						<!-- <img object-fit="fill" :src='detailData.code' @click="getQrcode"></img> -->
						<div id="qrcode" class="share"></div>
					</div>
					<div class="flex-between">
						<div class="text4 flex-center">券码信息<span class="text5">({{detailData.orderCardList&&detailData.orderCardList.length}}张可用)</span></div>
						<div class="text6 flex-center" @click="goRefundDetail(detailData.pkey)">
							退款中
						</div>
					</div>
					<div class="text2">{{detailData.expirationTime}} 到期
					</div>
					<div class="codeList">
						<ul>
							<li @click="goRefundDetail(detailData.pkey)" class="text1 flex-between" v-for="item in detailData.orderCardList" :key="item.pkey">
								<div :class="'text3'" class="">{{item.checkCode}}</div>
								<div :class="'text2'">{{item.checkTime?'已使用':'退款中'}}
									<van-icon name="arrow" />
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 商品信息 end -->
		<!-- 购买须知 -->
		<div class='whiteWrap' v-if="detailData.tipsContent">
			<div class="gmxz flex-center">购买须知</div>
			<div v-html="detailData.tipsContent"></div>
		</div>
		<!-- 购买须知 end-->
		<!-- 适用商户 -->
		<div class='whiteWrap'>
			<div class="vendorWrap">
				<div class="flex-between">
					<div class="text1 flex-center">适用商户<span class="text2">({{queryVendorListTotal}})</span></div>
					<div class="text2" @click="$router.push({path:'/coupon/vendorList',query:{pkey:detailData.goods}})">
						<van-icon name="arrow" />
					</div>
				</div>
				<div class="flex-row" v-if="queryVendorList.pkey">
					<img @click="$router.push({path: '/vendor/detail',query: { pkey: queryVendorList.pkey },})" object-fit="fill" class="icon1" :src="queryVendorList.photo[0] || ''"></img>
					<div class="flex-column ">
						<div class="text3">{{queryVendorList.name}}</div>
						<div class="flex-row flex-alignCenter">
							<van-rate readonly v-model="value" allow-half :icon="$store.state.rateIcon" :void-icon="$store.state.rateIcon2" />
							<div style="color:#D95954;margin-left:0.1rem">3.0</div>
						</div>
						<div class="text4">{{queryVendorList.addr}}</div>
					</div>
					<div class="flex-row">
						<div @click="openLocation(queryVendorList)" class="flex-column flex-center" style="margin-right: 0.4rem;margin-left:0.5rem">
							<img object-fit="fill" class="icon2" src='@/assets/images/dh.png'></img>
							<div>导航</div>
						</div>
						<div class="flex-column flex-center" @click="handlePhone">
							<img object-fit="fill" class="icon3" src='@/assets/images/phone.png'></img>
							<div>电话</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 适用商户 end -->
		<!-- 订单信息 -->
		<div class='whiteWrap'>
			<div class="orderWrap">
				<div class="">
					<div class="text1">订单信息</span></div>
				</div>
				<div class="blockWrap flex-row flex-alignCenter">
					<div class="text2">订单编号：</div>
					<div class="text3">{{detailData.code}} </div>
					<div class="text4" @click="copyTemplate(detailData.code)">复制</div>
				</div>
				<div class="blockWrap flex-row flex-alignCenter">
					<div class="text2">手机号：</div>
					<div class="text3">{{detailData.mobile}}</div>
				</div>
				<div class="blockWrap flex-row flex-alignCenter">
					<div class="text2">下单时间：</div>
					<div class="text3">{{detailData.createdTime}}</div>
				</div>
				<div class="blockWrap flex-row flex-alignCenter">
					<div class="text2">数量：</div>
					<div class="text3">{{detailData.codeNum}}</div>
				</div>
				<div class="blockWrap flex-row flex-alignCenter" v-if="detailData.couponListDTO&&detailData.couponListDTO.couponEntity.sub">
					<div class="text2">优惠：</div>
				
					<div class="text3" style="color:red">-<span style="font-size:0.2rem">￥</span>{{detailData.couponListDTO.couponEntity.sub}}</div>
				</div>
				<div class="blockWrap flex-row flex-alignCenter">
					<div class="text2">实际付款：</div>
					<div class="text3">{{detailData.priceAll}}</div>
				</div>
				<!-- <div class="blockWrap flex-row flex-alignCenter">
					<div class="text2">待付款：</div>
					<div class="text3">{{detailData.priceAll}}</div>
				</div> -->
			</div>
		</div>
		<!-- 订单信息 end -->
		<!-- 底部操作栏 -->
		<div class="bottomButton">
			<div class="flex-between flex-alignCenter" v-if="detailData.statusName == '待付款'">
				<div class="text2">
					<div class="text1">距离支付结束</div>
					<div class="text2">
						<van-count-down :time="time">
							<template #default="timeData">
								<div class="text2">
									<span class="">{{ timeData.minutes }}</span>
									<span class="">:</span>
									<span class="">{{ timeData.seconds }}</span>
								</div>
							</template>
						</van-count-down>
					</div>
				</div>
				<van-button class="button3" @click="goPay">{{detailData.priceAll}} 继续支付</van-button>
			</div>
			<div class="flex-between flex-alignCenter" v-if="detailData.statusName == '已过期' ||detailData.statusName == '已退款' ||detailData.statusName == '退款中' ||detailData.statusName == '已关闭' || detailData.statusName == '已付款'">
				<div></div>
				<van-button class="button3" @click="goCouponDetail(detailData.goods)">再来一单</van-button>
			</div>
			<div class="flex-between flex-alignCenter" v-if="(detailData.status == 'WRITTEN_OFF_PART' || detailData.status == 'COMPLETED')&&!detailData.evaluated ">
				<div>
				</div>
				<div>
					<van-button class="button2" @click="$router.push({path:'/coupon/evaluation',query:{pkey:$route.query.pkey}})">评价</van-button>
					<van-button class="button3" @click="goCouponDetail(detailData.goods)">再来一单</van-button>
				</div>
			</div>
		</div>
		<!-- 底部操作栏 end -->
	</div>
</template>
<script>
import QRCode from 'qrcodejs2'; // 引入qrcode
export default {
	name: 'app',
	components: {},
	data() {
		return {
			time: 5 * 60 * 1000,
			detailData: {
				text1: '单人儿童套餐',
				text2: '可用时间至2021.10.01',
				text3: '1000积分+1元',
				photo: require('@/assets/images/no-pic.jpg'),
				code: require('@/assets/images/code.jpg'),
				price: '1.00元',
				statusName: '待使用', //待付款 待使用 已完成 已关闭 退款中 已退款 已过期
			},
			queryVendorListTotal: 0,
			value: 3,
			queryVendorList: {},
			rateIcon:
				'https://filetest.xinanshizu.com/file/v2/image?file=4235.png&code=00D96F02428C3AD8E53A3A6724AEC38C',
			rateIcon2:
				'https://filetest.xinanshizu.com/file/v2/image?file=4236.png&code=C993979E415E6C8ED7784EFD6C0AEAFE',
		};
	},
	mounted() {
		this.loadOrder_order();
	},
	methods: {
		getQrcode(item) {
			console.log(document.getElementById('qrcode'));
			console.log(window.location.origin);
			document.getElementById('qrcode').innerHTML = ''; //清除上一次生成的二维码，防止刷新生成多个二维码
			let qrcode = new QRCode('qrcode', {
				width: 80, //二维码宽度
				height: 80, //二维码高度
				text: `${this.$store.state.shareUrl}/TheVendor/scanCodeResult?pkey=${item.pkey}`, // 二维码内容
				colorDark: '#000',
				colorLight: '#fff',
			});
		},
		goPay() {
			this.$router.push({
				path: '/coupon/payOrder',
				query: { pkey: this.$route.query.pkey },
			});
		},
		// 复制模板内容
		copyTemplate(value) {
			this.copyToClipboard(value); // 需要复制的文本内容

			this.$notify({ type: 'success', message: '操作成功' });
		},

		// 点击复制到剪贴板函数
		copyToClipboard(content) {
			if (window.clipboardData) {
				window.clipboardData.setData('text', content);
			} else {
				(function (content) {
					document.oncopy = function (e) {
						e.clipboardData.setData('text', content);
						e.preventDefault();
						document.oncopy = null;
					};
				})(content);
				document.execCommand('Copy');
			}
		},
		queryVendor_goods(pkey) {
			var params = {
				pkey: this.detailData.goods,
				page: 0,
				pagesize: 10,
				lat: this.$store.state.lat,
				lng: this.$store.state.lng,
			};
			this.$myApi.queryVendor_goods(params).then((res) => {
				if (res.code == 0) {
					if (res.result.content.length != 0) {
						this.queryVendorList = res.result.content[0];
					}
					this.queryVendorListTotal = res.result.total;
				} else {
				}
			});
		},
		/**
		 * 打电话
		 */
		handlePhone() {
			this.queryVendorList.mobile = this.queryVendorList.mobile.replace(
				' ',
				''
			);
			console.log(this.queryVendorList.mobile.replace(' ', '').length);
			if (this.queryVendorList.mobile) {
				this.$dialog
					.confirm({
						title: '是否拨打以下电话',
						message: this.queryVendorList.mobile,
					})
					.then(() => {
						window.location.href = `tel://${this.queryVendorList.mobile}`;
					})
					.catch(() => {});
			} else {
				this.$dialog
					.confirm({
						title: '提示',
						message: '商家未留有客服电话',
					})
					.then(() => {})
					.catch(() => {});
			}
		},
		collect() {
			var apiName = '';
			if (this.detailData.isCollect) {
				apiName = 'delCollect_goods';
			} else {
				apiName = 'addCollect_goods';
			}
			var params = {
				goodsPkey: this.$route.query.pkey,
			};
			this.$myApi[apiName](params).then((res) => {
				if (res.code == 0) {
					this.$notify({ type: 'success', message: '操作成功' });

					this.loadOrder_order();
				} else {
				}
			});
		},
		goRefund(pkey) {
			// console.log()
			this.$router.push({
				path: '/order/refund',
				query: { pkey: pkey },
			});
		},
		goRefundDetail(pkey) {
			// console.log()
			this.$router.push({
				path: '/order/refund_detail',
				query: { pkey: pkey },
			});
		},
		goCouponDetail(pkey) {
			// console.log()
			this.$router.push({
				path: '/coupon/detail',
				query: { pkey: pkey },
			});
		},

		loadOrder_order(pkey) {
			var params = {
				pkey: this.$route.query.pkey,
			};
			this.$myApi.loadOrder_order(params).then((res) => {
				if (res.code == 0) {
					this.detailData = res.result;
					this.time =
						new Date(res.result.payExpirationTime) - new Date();
					this.queryVendor_goods();
					this.getQrcode(res.result);
				} else {
				}
			});
		},
	},
};
</script>
<style lang="less">
#orderDetail {
	padding-left: 0rem;
	padding-right: 0rem;
	min-height: 100vh;
	background-color: #fafafa;
	padding-bottom: 2rem;
	.button3 {
		background: #ffce17;
		border-radius: 50px;
		font-size: 0.32rem;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333;
		padding: 0.3rem 0.57rem;
		height: auto;
	}
	.button2 {
		border-radius: 50px;
		font-size: 0.32rem;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333;
		padding: 0.3rem 0.57rem;
		height: auto;
		margin-right: 0.16rem;
	}
	.bottomButton {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 0.16rem 0.24rem;
		background: #fff;
		.text1 {
			font-size: 0.22rem;
			color: #333333;
			margin-bottom: 0.1rem;
		}
		.text2 {
			font-size: 0.3rem;
			color: #d95954;
			margin-right: 0.2rem;
		}
	}
	.whiteWrap {
		width: 7rem;
		padding: 0.24rem 0.16rem;
		margin-left: 0.25rem;
		background: #fff;
		position: relative;
		box-sizing: border-box;
		margin-top: 0.2rem;
		.gmxz {
			font-size: 0.34rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: #222222;
			// text-align: center;
			margin-bottom: 0.24rem;
			position: relative;
			z-index: 1;
		}
		.gmxz::before {
			content: '';
			width: 1.58rem;
			height: 0.12rem;
			background: #f3c978;
			border-radius: 10px;
			position: absolute;
			bottom: 0;
			z-index: -1;
		}
		.title {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
		}
	}
	.goodsWrap {
		.code {
			margin: 0.5rem 0;
			width: 100%;
			img {
				width: 2.74rem;
				height: 2.74rem;
			}
		}
		.icon1 {
			height: 1.2rem;
			width: 1.2rem;
			border-radius: 10px;
			margin-right: 0.24rem;
		}
		.text1 {
			font-size: 0.28rem;
			color: #000000;
			margin-bottom: 0.1rem;
		}
		.text2 {
			font-size: 0.24rem;
			color: #666666;
			margin-bottom: 0.1rem;
		}
		.text3 {
			font-size: 0.32rem;
			// font-family: PingFang SC;
			font-weight: bold;
			color: #d95954;
		}
		.text4 {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
			margin-top: 0.2rem;
		}
		.text5 {
			font-size: 0.26rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		.text6 {
			padding: 0rem 0.3rem;
			font-size: 0.24rem;
			color: #666666;
			background: #f5f5f5;
			margin-left: 0.1rem;
			border-radius: 20px;
		}
		.codeList {
			background: #fafafa;
			border-radius: 10px;
			width: 100%;
			padding: 0.3rem;
			margin-top: 0.3rem;
			// padding-bottom: 0;
			.text1 {
				font-size: 0.28rem;
				font-weight: bold;
				color: #333333;
			}
			.text2 {
				font-size: 0.26rem;
				color: #d95954;
			}
			.text3 {
				text-decoration: line-through;
				font-size: 0.25rem;
				font-weight: bold;
				color: #999;
			}
			.text4 {
				font-size: 0.26rem;
				color: #999;
				margin: 0;
			}
		}
	}
	.orderWrap {
		.text1 {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
		}
		.blockWrap {
			margin-bottom: 0.2rem;
			.text2 {
				width: 1.4rem;
				font-size: 0.26rem;
				color: #999999;
				text-align: right;
			}
			.text3 {
				font-size: 0.26rem;
				color: #333333;
			}
			.text4 {
				padding: 0.1rem;
				font-size: 0.24rem;
				color: #666666;
				background: #f5f5f5;
				margin-left: 0.1rem;
			}
		}
	}
	.vendorWrap {
		.text1 {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
		}
		.text2 {
			font-size: 0.26rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		width: 100%;
		overflow-x: scroll;
		.icon1 {
			height: 1.14rem;
			width: 1.14rem;
			border-radius: 10px;
			margin-right: 0.24rem;
		}
		.icon2 {
			width: 0.32rem;
			height: 0.32rem;
			margin-bottom: 0.12rem;
		}
		.icon3 {
			width: 0.24rem;
			height: 0.3rem;
			margin-bottom: 0.12rem;
		}
		.text3 {
			font-size: 0.3rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			width: 3rem;
			// margin-bottom: 0.1rem;
		}
		.text4 {
			font-size: 0.24rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: #999999;
		}
	}
}
</style>
<style lang="less" scoped>
/deep/.van-tabs__nav--line.van-tabs__nav--complete {
	background: #f8f8f8;
}
/deep/.van-search .van-cell {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	font-size: 0.28rem;
}
/deep/.van-tab {
	// flex: 0 1 auto;
	// width: 1rem;
	font-size: 0.3rem;
}
/deep/.van-tab--active {
	font-weight: bold;
	font-size: 0.32rem;
}
</style>